<template>
  <div id="callStatusPie">
    <DecorativeTitle text="电话呼入"/>
    <div class="chart-container">
      <!-- 右上角总数显示 -->
      <div class="total-count">
        <span style="color: #3DE7C9; font-size: 14px;">总数:</span> {{ totalCount }}
      </div>
      <Echart :options="options" id="statusChart" height="180px" width="100%"></Echart>
    </div>
  </div>
</template>

<script>
import DecorativeTitle from "_c/DecorativeTitle.vue";
import Echart from "@/common/echart/index.vue";

export default {
  name: "CallStatusPie", // 组件名称
  components: {
    Echart,
    DecorativeTitle
  },
  props: {
    statusData: {
      type: Object,
      default: () => ({
        unAnswered: 0, // 未接听
        notOnStage: 0, // 未上台
        pickedUp: 0    // 摘机
      })
    }
  },
  data() {
    return {
      options: {}
    }
  },
  computed: {
    // 计算总数（三种状态总和）
    totalCount() {
      const { unAnswered, notOnStage, pickedUp } = this.statusData;
      return unAnswered + notOnStage + pickedUp;
    }
  },
  watch: {
    statusData: {
      handler(newData) {
        const total = this.totalCount;
        this.options = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [
            {
              name: '状态统计',
              type: 'pie',
              radius: ['30%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: 'outside',
                formatter: '{b} \n\n {c} ',
                fontSize: 14,
                color: '#3DE7C9'
              },
              labelLine: {
                show: true,
                length: 15,
                length2: 20,
                lineStyle: {
                  color: '#FFF'
                }
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 14,
                  fontWeight: 'bold',
                  formatter: `总计: ${total}`,
                  position: 'center'
                }
              },
              data: [
                {
                  value: newData.unAnswered,
                  name: '未接听',
                  itemStyle: { color: '#ff0000' } // 红色系
                },
                {
                  value: newData.notOnStage,
                  name: '未上台',
                  itemStyle: { color: '#e6a23c' } // 黄色系
                },
                {
                  value: newData.pickedUp,
                  name: '摘机',
                  itemStyle: { color: '#5470c6' } // 绿色系
                }
              ]
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
$box-height: 290px;
#callStatusPie {
  padding: 15px;
  width: 100%;
  height: $box-height;
  position: relative;
}

.chart-container {
  position: relative;
  width: 100%;
  padding-top: 15px;
  height: 180px;
}

.total-count {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 10px;
  color: #FFF;
  font-size: 18px;
  font-weight: bold;
  z-index: 10;
}
</style>
